<template>
   <!-- 卡片 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
       <!-- 添加按钮 -->
      <el-button type="primary" :icon="Plus">添加</el-button>

      </div>

    </template>

   <!-- 表格 -->
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
    <el-table-column  type="index" label="序号" width="80" align="center" />
    <el-table-column prop="tmName" label="品牌名称" />
    <el-table-column  label="品牌LOG" >
      <!-- 作为域插槽子传父 -->
      <template v-slot="{row}">
      <img :src="row.logoUrl" alt="" style="width: 100px ;height: 100px;">
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
         <el-button type="warning"  :icon="Edit" size="small  " />
           <el-button type="danger" :icon="Delete" size="small  " />
      </template>
    </el-table-column>
  </el-table>

    <!-- 分页器 -->
     <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="  prev, pager, next, jumper,->,sizes,total,"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

</template>

<script lang="ts" setup>
import { Plus, Edit, Delete } from '@element-plus/icons-vue'

//导入获取品牌数据请求
import {reqbaseTrademark} from '@/api/product/trademark.ts'
import { onMounted, ref } from 'vue'
//定义渲染表格数据的容器
let tableData = ref([]) 

let page =ref(1) //当前页码的数据
let limit = ref(5)//每页要显示的数量
const loading = ref(true)//loading加载
//定义一个函数获取品牌数据

const gtebaseTrademark = async() => {
  const result = await reqbaseTrademark(1, 5)
  //將值赋值给上面的容器
  tableData.value = result.records
  loading.value=false//加载效果结束
}    
//在页面挂载的时候发送请求
onMounted(() => {
  //发送请求
  gtebaseTrademark()
})
</script>

<style>

</style>